<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-for="item in list" @click="add(item)">{{item}}</button>
        <br>
        <div>{{Div}}</div>
    </div>
</body>
<script>
    const {createApp}=Vue
    const app=createApp({
        data() {
            return {
            list:[0,1,2,3,4,5,6,7,8,9,'+','-','*','/','=','Mac'],
            pre:'',
            Sym:'',
            after:'',
            result:0,
            Div:''
            }
        },
       methods: {
            add(item){
                if(this.result){
                    this.pre=''
                    this.after=''
                    this.Sym=''
                    this.Div=''
                    this.result=0
                }
                if(!this.Sym){
                    if(this.pre==''){
                        if([1,2,3,4,5,6,7,8,9].includes(item)){
                        this.pre+=item
                        this.Div+=item
                        }
                    }else{
                        if([0,1,2,3,4,5,6,7,8,9].includes(item)){
                        this.pre+=item
                        this.Div+=item
                        console.log(this.pre);
                        }else if(['+','-','*','/'].includes(item)){
                        this.Sym=item
                        this.Div+=item
                        console.log(this.Sym);
                        }
                    }
                }else{
                    if([0,1,2,3,4,5,6,7,8,9].includes(item)){
                        this.after+=item
                        this.Div+=item
                    }
                }
                if(item=='='){
                    if(this.Sym=='+'){
                        this.result=Number(this.pre)+Number(this.after)
                    }
                    else if(this.Sym=='-'){
                        this.result=Number(this.pre)-Number(this.after)
                    }
                    else if(this.Sym=='*'){
                        this.result=Number(this.pre)*Number(this.after)
                    }
                    else if(this.Sym=='/'){
                        this.result=Number(this.pre)/Number(this.after)
                    }
                        this.Div=this.result
                }
                if(item=='Mac'){
                    this.pre=''
                    this.after=''
                    this.Sym=''
                    this.Div=''
                }
            },
            
       }
    })
    app.mount('#app')
</script>

</html>